<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Hello WebSocket</title>
    <script src="../js/lib/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        var stompClient = null;
        function setConnected(connected) {
            $('#connect').prop({'disabled': connected});
            $('#disconnect').prop({'disabled': !connected});
            $('#conversationDiv').css({visibility: connected});
            $('#response').empty();
        }

        function connect() {
            var socket = new SockJS('/hello');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame){
                setConnected(true);
                console.log('Connected: '+ frame);
                stompClient.subscribe('/topic/greetings', function(greeting){
                    showGreeting(JSON.parse(greeting.body).content);
                });
            });
        }

        function disconnect() {
            stompClient.disconnect();
            setConnected(false);
            console.log('Disconnected');
        }

        function sendName() {
            var name = $('#name').val();
            stompClient.send('/app/hello', {}, JSON.stringify({'name': name}));
        }

        function showGreeting(message) {
            $("<p/>").css({wordWrap: 'break-word'}).text(message).appendTo($('#response'));
        }

    </script>
</head>
<body>

<noscript>
    <h2 style="color: #ff0000">
        Seems your browser doesn't support Javascript! Websocket relies on Javascript being
        enabled. Please enable
        Javascript and reload this page!
    </h2>
</noscript>

<h3>Hello WebSocket</h3>

<div>
    <div>
        <button id="connect" onclick="connect();">Connect</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
    </div>
    <div id="conversationDiv">
        <label>What is you name?</label><input type="text" id="name"/>
        <button id="sendName" onclick="sendName();">Send</button>
        <p id="response"></p>
    </div>

</div>

</body>
</html>